<template>
    <view class="container">
        <!-- 搜索条 -->
        <!-- <view class="searchTopBox">
            <view class="searchBoxRadius">
                <view class="grace-search-icon searchBoxIcon"></view>
                <input class="searchBoxIpt" type="search" v-model="ipt" @confirm="searchNow($event)" placeholder="关键字"></input>
            </view>
        </view> 
		 <input placeholder="请输入关键字搜索" focus="true" v-model="ipt" @confirm="searchNow($event)"/>
		-->
		
        <view class="example-body">
        	<uni-search-bar radius="100" focus="true" v-model="ipt" clearButton="auto" @confirm="searchNow($event)" />
        </view>
         
         
        <!-- 搜索历史 -->
        <view class="searchBotBox">
            <view class="ov">
                <view class="fl">历史搜索</view>
                <view @tap="clearKey" class="fr grace-more-r grace-search-remove">
                    <image src="../../static/img/sc.png" mode=""></image>
                    </view>
            </view>
            <view class="searchHistoryBox">
                <view class="searchHistoryBoxItem" v-for="(item,index) in searchAll" :key='index' @click="qusousuo(item)">
                    {{item.value}}
                </view>
            </view>
        </view>
    </view>
</template>
<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	
    export default {
		components: {
			uniSearchBar
		},
        data() {
            return {
                ipt:'',				// 输入框输入的值
				searchVal: '',		
				searchAll: []       // 搜索记录
            }
        },
        onLoad() {
            console.log(this.ipt.length)
        },
        onShow() {
            try{
                var vv = uni.getStorageSync('searchLocal') || "";
                if(vv) {
                    this.searchAll = JSON.parse(vv);
                } else {
                    this.searchAll = [];
                }
            } catch(e){
                console.log(e)
            }
        },
        methods: {
			
			input(res) {
				this.searchVal = res.value
			},
            clearKey: function() {
                var that = this;
                uni.showModal({
                    title: '提示',
                    content: '点击确定将删除所有历史信息，确定删除吗？',
                    success: function(res) {
                        // if (res.confirm) {
                            that.searchAll = [];
                            uni.setStorage({
                                key: 'searchLocal',
                                data: that.searchAll
                            });
//                      } else if (res.cancel) {
//
//                      }
                    }
                });
 
            },
            searchNow(e) {
                console.log(e)
                if (this.ipt == '') {
                    uni.showToast({
                        title: '未输入搜索关键字',
                        icon: 'none',
                        duration: 1000
                    });
                    return false;
                }
                var that = this;
                var newArr = that.searchAll;
                if(this.searchAll.indexOf(this.ipt) == -1){
                    newArr.unshift(this.ipt);
                }
                if(newArr.length >= 11 ){
                    newArr.pop()
                }
                newArr = JSON.stringify(newArr);//转换成json格式的数据
                uni.setStorage({
                    key: 'searchLocal',
                    data: newArr
                });
                this.qusousuo(this.ipt);
            },
            qusousuo(e){
				uni.$emit('searchVal',{searchVal:e.value});
				uni.navigateBack();
            }
        }
     
    }
</script>
<style lang="scss">
    .container{
        padding-left:30upx;
        padding-right: 30upx;
        // background: pink;
    }
    .u1{
        display: flex;
        justify-content: space-between;
        padding-top: 20upx;
        padding-bottom: 15upx;
        .sousuo{
            display: flex;
            position: relative;
            input{
                font-size: 24upx;
                line-height: 28upx;
                border-bottom:1px solid #f5f5f5;
                width: 515upx;
            }
            image{
                width: 35upx;
                height: 35upx;
                position: absolute;
                right: 30upx;
                z-index: 3;
            }
        }
    }
     
    page {
        background: #FFF;
    }
 
    .ov {
        overflow: hidden;
    }
 
    .fl {
        float: left;
        font-family: PingFang-SC-Medium;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 20px;
        letter-spacing: 0px;
        color: #666666;
    }
 
    .fr {
        float: right;
    }
    .fr image{
        width:35upx;
        height: 37upx;
    }
    .searchTopBox {
        width: 100%;
        background-color: #0b877f;
        height: 100upx;
        box-sizing: border-box;
        padding-top: 15upx;
    }
 
    .searchBoxRadius {
        width: 90%;
        height: 70upx;
        background-color: #fff;
        margin-left: 5%;
        overflow: hidden;
        border-radius: 35upx;
    }
 
    .searchBoxIcon {
        font-size: 40upx;
        margin-top: 20upx;
        margin-left: 20upx;
        float: left;
    }
 
    .searchBoxIpt {
        height: 70upx;
        line-height: 70upx;
        margin-left: 20upx;
        float: left;
    }
 
    .searchBotBox {
        width: 100%;
        margin-top: 30upx;
        padding: 15upx 3%;
        box-sizing: border-box;
    }
 
    .searchHistoryBox {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        margin-top: 40upx;
    }
 
    .searchHistoryBoxItem {
        float: left;
        font-size: 26upx;
        color: #666;
        line-height: 49upx;
        height: 50upx;
        padding: 0 20upx;
        border-radius: 50upx;
        margin:15upx 30upx 15upx 0;
        border: 1px solid #ccc;
        text-align: center;
    }
</style>